<div class="header">
  <div class="top-bar">
    <div class="relative">
      <div class="topper"></div>
      <div class="user-menu-back" (click)="browserMenu.style.display = 'none';browserMenuBack.style.display = 'none'"
           #browserMenuBack></div>
      <div class="user-menu-back" (click)="commandMenu.style.display = 'none';commandMenuBack.style.display = 'none'"
           #commandMenuBack></div>

      <div class="user-menu-back" (click)="deviceMenu.style.display = 'none';deviceMenuBack.style.display = 'none'"
           #deviceMenuBack></div>
      <div class="user-menu device-menu" #deviceMenu>
        <ng-container *ngFor="let device of adbService.displayDevices">
          <div class="btn-flat waves-light waves-light full-width center-align white-text truncate"
               (click)="deviceMenu.style.display = 'none';deviceMenuBack.style.display = 'none';adbService.deviceSerial = device.id;adbService.updateConnectedStatus()"
          >[{{device.id}}] {{device.deviceName}}</div><br>
        </ng-container>
      </div>
      <div class="title-menu-container">
        <div class="user-menu command-menu" #commandMenu>
          <div class="btn-flat waves-light waves-light full-width center-align white-text truncate"
               (click)="commandMenu.style.display = 'none';commandMenuBack.style.display = 'none';adbModal.openModal()"
          ><i class="material-icons left">input</i>Custom Command</div><br>
          <div class="btn-flat waves-light waves-light full-width center-align white-text"
               (click)="commandMenu.style.display = 'none';commandMenuBack.style.display = 'none';favoriteType = 'commandFavourites';favouriteMax = 20;favoritePathType = 'Command';manageFavs.openModal()"
          ><i class="material-icons left">edit</i>Manage</div><br>
          <div class="btn-flat waves-light waves-light full-width center-align white-text truncate"
               (click)="commandMenu.style.display = 'none';commandMenuBack.style.display = 'none';logcatModal.openModal()"
          ><i class="material-icons left">toc</i>Logcat</div><br>
          <ng-container *ngFor="let favourite of favourites.commandFavourites">
            <div class="btn-flat waves-light waves-light full-width center-align white-text truncate"
                 (click)="commandMenu.style.display = 'none';commandMenuBack.style.display = 'none';adbCommandToRun = favourite.uri; runAdbCommand(); adbModal.openModal()"
            ><img *ngIf="favourite.icon" class="left browser-menu-image" src="{{favourite.icon}}"/>{{favourite.name}}</div><br>
          </ng-container>
        </div>
        <div class="user-menu browser-menu" #browserMenu>
          <div class="btn-flat waves-light waves-light full-width center-align white-text truncate"
               (click)="browserMenu.style.display = 'none';browserMenuBack.style.display = 'none';webService.loadUrl(webUrl || 'https://sidequestvr.com')"
               routerLink="/webview"><i class="material-icons left">home</i>Home</div><br>

          <div class="btn-flat waves-light waves-light full-width center-align white-text"
               (click)="browserMenu.style.display = 'none';browserMenuBack.style.display = 'none';bookmarksModal.openModal()"
               routerLink="/webview"><i class="material-icons left">public</i>Go to url</div><br>
          <div class="btn-flat waves-light waves-light full-width center-align white-text"
               (click)="browserMenu.style.display = 'none';browserMenuBack.style.display = 'none';favoriteType = 'browserFavourites';favouriteMax = 20;favoritePathType = 'Url';manageFavs.openModal()"
          ><i class="material-icons left">edit</i>Manage Favs</div><br>
          <ng-container *ngFor="let favourite of favourites.browserFavourites">
            <div class="btn-flat waves-light waves-light full-width center-align white-text truncate"
                 (click)="browserMenu.style.display = 'none';browserMenuBack.style.display = 'none';webService.loadUrl(favourite.uri)"
                 routerLink="/webview"><img *ngIf="favourite.icon" class="left browser-menu-image" src="{{favourite.icon}}"/>{{favourite.name}}</div><br>
          </ng-container>
        </div>
        <div class="pure-material-button-contained slim update-available" *ngIf="appService.updateAvailable" (click)="updateAvailable()">Update Available</div>

<!--        <app-link *ngIf="appService.updateAvailable"-->
<!--                  class="waves-effect waves-light btn-flat  link small-button warning" (click)="updateAvailable()"-->
<!--                  text="Update"></app-link>-->
        <i mz-tooltip routerLink="/webview" (click)="doBack()"
           class="material-icons white-text no-outline" position="bottom" tooltip="Back">
          arrow_back
        </i>
        <i mz-tooltip *ngIf="!webService.isWebviewLoading" (click)="browserMenu.style.display = 'block';browserMenuBack.style.display = 'block'"
           class="material-icons white-text no-outline" position="bottom" tooltip="Web Browser">
          public
        </i>
        <div mz-tooltip *ngIf="webService.isWebviewLoading" (click)="browserMenu.style.display = 'block';browserMenuBack.style.display = 'block'"
             class="loader-tiny pointer" position="bottom"
             tooltip="Web Browser Loading..."></div>
        <i mz-tooltip routerLink="/webview" (click)="webService.forward()"
           class="material-icons white-text no-outline" position="bottom" tooltip="Forward">
          arrow_forward
        </i>
        <i mz-tooltip routerLink="/streaming" *ngIf="isConnected()&&osPlatform === 'win32'"
           class="material-icons white-text no-outline" position="bottom"
           tooltip="Stream from your headset to your PC with ScrCpy.">
          live_tv
        </i>
        <i mz-tooltip *ngIf="adbService.deviceIp" routerLink="/wireless"
           class="material-icons no-outline"
           [ngClass]="{'green-text':adbService.wifiEnabled,'white-text':!adbService.wifiEnabled}" position="bottom"
           tooltip="Enable wireless mode. (Experimental)">
          wifi
        </i>
        <i mz-tooltip #mainLogo (click)="selectAppToInstall()"
           class="material-icons white-text no-outline" position="bottom"
           tooltip="Install APK file from folder on computer.">
          archive
        </i>
        <i mz-tooltip class="material-icons white-text no-outline " routerLink="/device-files"
           position="bottom" tooltip="Manage files on the headset.">
          folder
        </i>
        <i routerLink="packages" mz-tooltip class="material-icons white-text no-outline"
           position="bottom" tooltip="Currently installed apps">
          apps
        </i>
        <i routerLink="tasks" mz-tooltip class="material-icons white-text no-outline" position="bottom"
           tooltip="Running {{processService.left_length}} tasks.">
          playlist_add_check
        </i><span routerLink="tasks" mz-tooltip *ngIf="processService.left_length" position="bottom"
                  tooltip="Running {{processService.left_length}} tasks."
                  class="process-badge pink-button">{{processService.left_length>100?'99+':processService.left_length}}</span>
        <span routerLink="tasks" mz-tooltip *ngIf="!processService.left_length&&processService.failed_length"
              position="bottom" tooltip="{{processService.failed_length}} failed tasks."
              class="process-badge pink-button red">{{processService.failed_length>100?'99+':processService.failed_length}}</span>
        <i id="device-settings" routerLink="tools" mz-tooltip
           class="material-icons white-text no-outline" position="bottom"
           tooltip="Device settings & tools">
          build
        </i>
        <i id="support-screen" routerLink="/setup" mz-tooltip
           class="material-icons white-text no-outline" position="bottom"
           tooltip="Help and support with SideQuest">
          contact_support
        </i>

        <i mz-tooltip (click)="commandMenu.style.display = 'block';commandMenuBack.style.display = 'block'"
           class="material-icons white-text no-outline"
           position="bottom" tooltip="Run ADB commands">
          input
        </i>
      </div>
      <div id="connection-status-container">
        <i mz-tooltip class="material-icons white-text no-outline connection-device-select pointer left"
           *ngIf="adbService.devices && adbService.devices.length > 1"
           (click)="deviceMenu.style.display = 'block';deviceMenuBack.style.display = 'block'"
           position="bottom" tooltip="Select Device">
          arrow_drop_down
        </i>
        <div class="connection-status-outer left">
          <div id="connection-status" class="connection-status-unauthorized  "  mz-tooltip
               position="bottom" [ngClass]="adbService.connectionCss" [tooltip]="adbService.lastErrorMessage||'Device connection status.'">


          </div>
          <div id="connection-status-message" [innerHTML]="adbService.deviceStatusMessage"></div>
        </div>
        <div class="pure-material-button-contained slim get-help" *ngIf="!adbService.isReady" routerLink="/setup">Open Setup Instructions</div>
      </div>
    </div>
  </div>
  <div class="top-dnd-backing">

    <div class="top-banner">
<!--      <div>-->
<!--        <a href="#/" class="logo">-->
<!--          <img src="assets/images/new-logo.png" />-->
<!--        </a>-->
<!--      </div>-->
      <div class="top-buttons hide-on-med-and-down">
      </div>
      <div class="well well-lg drop-message center-align" *ngIf="dragAndDropService.isDragging">
        <h5>Drop file(s) here!</h5>
        <br />
        <span class="spinner-loading-message" [innerHTML]="dragAndDropService.message"></span>
      </div>
    </div>
    <div *ngIf="appService.showBrowserBar" class="beast-saber-buttons">
      <a class="waves-effect waves-light synthrideerz"
         (click)="webService.loadUrl('https://synthriderz.com/beatmaps/recent')">
        <img src="assets/images/Synth.png" class="responsive-img" /></a>&nbsp;&nbsp;&nbsp;
    </div>
  </div>
</div>

<mz-modal #bookmarksModal [fixedFooter]="true">
  <mz-modal-header>
    <h4>Web Browser</h4>
  </mz-modal-header>
  <mz-modal-content>
    <div class="center-align">
      <h5>Custom Url</h5>
      <div class="input-field inline browser-input">
        <input id="web_address" type="text" [(ngModel)]="webService.currentAddress" (keyup)="gogo($event)"
               placeholder="Address" />
        <label class="active label-dark-theme" for="web_address">
          Address
        </label>
      </div>
      <a class="pure-material-button-contained search-button-margin" routerLink="/webview"
         (click)="webService.loadUrl(webService.currentAddress);" mz-modal-close>Open</a>

      <br><br>
    </div>

  </mz-modal-content>
  <mz-modal-footer>
    <div class="pure-material-button-contained spaced flat active" (click)="bookmarksModal.closeModal()">Close</div>
    <div class="pure-material-button-contained spaced" routerLink="/webview" (click)="bookmarksModal.closeModal(); webService.loadUrl(webUrl || 'https://sidequestvr.com');" >SideQuest Home</div>
  </mz-modal-footer>
</mz-modal>


<mz-modal #logcatModal [fixedFooter]="true" [options]="{dismissible: false}">
  <mz-modal-header>
    <div class="pure-material-button-contained spaced red right" (click)="logcatModal.closeModal();stopLogcat(); currentLogCat.length = 0; isStarted = false;">Close</div>
    <div class="pure-material-button-contained spaced red right" (click)="stopLogcat(); isStarted = false;">Stop</div>
    <div class="pure-material-button-contained spaced right" *ngIf="!saveLogcatPath" (click)="selectLogcatOutput();">Pick Output Folder</div>
    <div class="pure-material-button-contained spaced red right" *ngIf="saveLogcatPath" (click)="cancelLogcatOutput(); isStarted = false;">Cancel Output</div>

  <h4>ADB Logcat</h4>
  </mz-modal-header>
  <mz-modal-content>
    Select your options and click start to begin receiving logcat messages.
    <div class="truncate">{{saveLogcatPath ? 'Saving to: ' + appService.path.join(saveLogcatPath,'logcat.log')  : ''}}
      <div class="pure-material-button-contained spaced red" *ngIf="saveLogcatPath" (click)="clearLogcatFile();">Clear File</div>

  </div>
    <br>
    <div class="button-section">
      <div class="code logcat-block">
        <div *ngIf="!currentLogCat.length">
          {{isStarted ? 'Waiting for messages...' : 'Click start to begin streaming logcat messages.'}}
        </div>
        <!--        <virtual-scroller #scroll [items]="currentLogCat">-->
        <div class="child-item" *ngFor="let logcat of currentLogCat">
          <div class="row no-margin">
            <div class="col s2 logcat-smaller green-text no-padding">{{logcat.date}}: {{priorities[logcat.priority]}}</div>
            <div class="col s2 logcat-smaller purple-text no-padding">{{logcat.tid}}/{{logcat.pid}} {{logcat.tag}} </div>
            <div class="col s8 logcat-small no-padding"
                 [ngClass]="{'red-text': logcat.priority === 6, 'orange-text': logcat.priority === 5}" [innerHTML]="logcat.message">
            </div>
          </div>
        </div>
        <!--        </virtual-scroller>-->
      </div>
    </div>
  </mz-modal-content>
  <mz-modal-footer>
    <div class="row">
      <div class="col s6">
        <input id="logcatSearch" type="text" [(ngModel)]="logcatSearch" placeholder="Search/Tag Filter" />
      </div>
      <div class="col s3">
        <select class="browser-default" [(ngModel)]="logcatPriority">
          <option disabled>Priority</option>
          <option value="unknown">unknown</option>
          <option value="default">default</option>
          <option value="verbose">verbose</option>
          <option value="debug">debug</option>
          <option value="info">info</option>
          <option value="warn">warn</option>
          <option value="error">error</option>
          <option value="fatal">fatal</option>
          <option value="silent">silent</option>
        </select>
      </div>
      <div class="col s3">
        <div class="pure-material-button-contained" (click)="startLogcat(); isStarted = true;">{{isStarted?'Restart':'Start'}}</div>
    </div>
    </div>
  </mz-modal-footer>
</mz-modal>

<mz-modal #safeModal [fixedFooter]="true">
  <mz-modal-header>
    <h4>Harmful Content Detected!!</h4>
  </mz-modal-header>
  <mz-modal-content>

    <img class="right margin-left" src="assets/images/bigman.gif" style="width: 430px"/>
    WARNING: We have stopped this install because it may may harm your device.
    <br><br>
    If you think this has happened in error, please contact us on Discord with a link to the apk file.<br><br>
    We have protected you from:<br><br>
    - Causing physical damage to your headset.<br>
    - Having your personal information stolen ( including tracking your movments in VR )<br>
    - Being banned from the Oculus platform.<br>
    - Loosing access to developer/experimental mode on your headset.<br>
    - Loosing access to your content library including paid games and apps.<br>
    - Being banned from creating Oculus Accounts in the future.<br>
    - Being reported to the police for illegal activites.<br>
    - Starving poor developers to death.<br><br>
    You can click "Back to Safety" and the harmful content will not make it onto your device.
    <br><br>
    Thank you and have a great day!
  </mz-modal-content>
  <mz-modal-footer>
    <div class="pure-material-button-contained spaced" (click)="safeModal.closeModal(); ">Back to Safety</div>
  </mz-modal-footer>
</mz-modal>

<mz-modal #adbModal [fixedFooter]="true">
  <mz-modal-header>
    <h4>Run ADB Command</h4>
  </mz-modal-header>
  <mz-modal-content>
    Run an ADB command from here to be able to see the output. Use this to troubleshoot issues or perform advanced
    operations.

    <br><br>
    <div class="button-section">
      <div class="input-field">
        <input id="adbCommand" type="text" [(ngModel)]="adbCommandToRun" placeholder="Command To Run..." />
      </div>
      <code>
        <pre *ngIf="adbService.adbResponse">{{adbService.adbResponse}}</pre>
      </code>
    </div>
    <br>
    <ng-container *ngFor="let favourite of favourites.commandFavourites">
      <span class="chip margin-right pointer" (click)="this.adbCommandToRun = favourite.uri; runAdbCommand()"><img *ngIf="favourite.icon" src="{{favourite.icon}}"/>{{favourite.name}}</span>
    </ng-container>
    <br><br>
  </mz-modal-content>
  <mz-modal-footer>
    <div class="pure-material-button-contained flat active spaced" (click)="adbModal.closeModal(); ">Close</div>
    <div class="pure-material-button-contained spaced" (click)="runAdbCommand()">Run Command</div>
 </mz-modal-footer>
</mz-modal>


<mz-modal #manageFavs [fixedFooter]="true">
  <mz-modal-header>
    <div class="pure-material-button-contained spaced right" (click)="showAddFavourite = !showAddFavourite">{{showAddFavourite? 'Hide' : 'Add New'}}</div>
    <div class="pure-material-button-contained spaced right" *ngIf="!showAddFavourite" (click)="addCurrentFavourite()">Add Current to favs</div>
   <h4>Manage Favourites</h4>
  </mz-modal-header>
  <mz-modal-content>
    Manage your favourites here. If you need to undo click RESET at the bottom. When you are done click SAVE.<br><br>
    <ng-container *ngIf="!favouriteImportExport">
      <ng-container *ngIf="showAddFavourite"> <h5>Add New</h5>
        <hr>
        <div class="no-margin" *ngIf="this.favourites[favoriteType].length >= favouriteMax">
          You cannot add any more. Please remove some first.
        </div>
        <div class="row no-margin" *ngIf="this.favourites[favoriteType].length < favouriteMax">
          <div class="col s3"><input type="text" placeholder="Name" [(ngModel)]="favoriteName"/></div>
          <div class="col s4"><input type="text" placeholder="{{favoritePathType}}" [(ngModel)]="favoriteUri"/></div>
          <div class="col s4"><input type="text" placeholder="Icon Url" [(ngModel)]="favoriteIcon"/></div>
          <div class="col s1"><i class="material-icons green-text fav-manage-icon pointer"
                                 (click)="addToFavorites(favoriteType, favoriteName, favoriteUri, favoriteIcon)">add</i></div>
        </div>
      </ng-container>
      <div class="row fav-padding">
        <div class="col s4">Name</div>
        <div class="col s4">{{favoritePathType}}</div>
        <div class="col s4">Icon Url (Optional)</div>
      </div>
      <hr>
      <div class="no-margin" *ngIf="!this.favourites[favoriteType].length">
        Nothing added here yet, add something below.
        <br><br>
      </div>
      <div dragula="SONGS" [(dragulaModel)]="this.favourites[favoriteType]" >
        <div class="row fav-padding relative" *ngFor="let fav of this.favourites[favoriteType]; let i = index">
          <i class="material-icons drag-indicator grey-text">drag_indicator</i>
          <div class="col s3 m4"><input type="text" [(ngModel)]="fav.name"/></div>
          <div class="col s3"><input type="text" [(ngModel)]="fav.uri"/></div>
          <div class="col s3"><input type="text" [(ngModel)]="fav.icon"/></div>
          <div class="col s3 center-align m2">
            <div class="pure-material-button-contained" (click)="setLocalIcon(fav)">Pick Icon</div>
          </div>
          <i class="material-icons delete-button orange-text" (click)="removeFromFavourites(favoriteType, i)">close</i>
        </div>
      </div>
    </ng-container>

  </mz-modal-content>
  <mz-modal-footer>
    <div class="pure-material-button-contained flat active spaced" (click)="resetFavourites(favoriteType); showAddFavourite = false;manageFavs.closeModal()">Cancel</div>
    <div class="pure-material-button-contained spaced" (click)="saveFavourites(favoriteType); showAddFavourite = false;manageFavs.closeModal()">Save</div>
</mz-modal-footer>
</mz-modal>
